<template>
    <div class="mid-block1">
      <div class="midtab clearfix">
        <div class="tab-left">
          <swiper ref="swiperTop" class="swiper" :options="swiperOptionTop">
            <template v-for="(item, index) in playerList">
              <swiper-slide :key="index" style="height: 450px">
                <haikang
                  :camera="item"
                  :width="800"
                  :height="450"
                  :regulate="true"
                  template-type="standard"
                />
                <!--              <video :id="item.id" :src="item.url" width="100%" height="450" autoplay controls playsInline webkit-playsinline />-->
              </swiper-slide>
            </template>
          </swiper>
        </div>
     
        <div class="tab-right" style="position: relative">
          <div class="prev" style="top: -10px">
            <i class="el-icon-caret-top" style="color: white" />
          </div>
          <swiper
            ref="swiperThumbs"
            class="swiper"
            :options="swiperOption"
            style="height: 410px; margin: 20px 0"
            @click-slide="handleClickSlide"
          >
            <template v-for="(item, index) in playerList">
              <swiper-slide
                :key="index"
                style="height: 95px; position: relative"
                :class="{ active: active === index }"
              >
                <haikang :camera="item" :width="156" :height="92" />
                <!--              <video :id="item.id+ 'Thumbs'" :src="item.url" width="100%" height="95" playsInline webkit-playsinline />-->
                <div
                  class="title text-ellipsis"
                  style="
                    position: absolute;
                    color: #ffffff;
                    background: linear-gradient(
                      180deg,
                      rgba(0, 0, 0, 0) 0%,
                      rgba(0, 0, 0, 1) 100%
                    );
                    z-index: 10;
                    left: 0;
                    right: 0;
                    padding: 0 10px;
                    bottom: 0;
                    font-size: 12px;
                    height: 45px;
                    line-height: 70px;
                  "
                >
                  {{ item.name }}
                </div>
              </swiper-slide>
            </template>
          </swiper>
          <div class="next" style="bottom: -10px">
            <i class="el-icon-caret-bottom" style="color: white" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
  import "swiper/css/swiper.css";
  
  import { postHandle } from "@/api";
  import haikang from "./haikang";
  export default {
    name: "VideoShow",
  
    components: {
      haikang,
      Swiper,
      SwiperSlide,
    },
  
    props: {
      newSpaceId: {
        type: String,
      },
    },
  
    data() {
      return {
        calleft: 0,
        active: 0,
        player: null,
        playerList: [],
        swiperOptionTop: {
          loopedSlides: 5, // looped slides should be the same
          spaceBetween: 10,
        },
        swiperOption: {
          direction: "vertical",
          loopedSlides: 4, // looped slides should be the same
          spaceBetween: 10,
          slidesPerView: "auto",
          touchRatio: 0.2,
          slideToClickedSlide: true,
          height: 410,
          navigation: {
            nextEl: ".next",
            prevEl: ".prev",
          },
        },
      };
    },
  
    computed: {
      spaceId() {
        return this.$store.state.project.spaceId;
      },
    },
  
    watch: {
      newSpaceId(v) {
        if (v) this.getData();
      },
    },
  
    directives: {
      swiper: directive,
    },
  
    created() {
      this.getData();
    },
  
    mounted() {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.$swiper;
        const swiperThumbs = this.$refs.swiperThumbs.$swiper;
        swiperTop.controller.control = swiperThumbs;
        swiperThumbs.controller.control = swiperTop;
      });
    },
  
    methods: {
      getData() {
        postHandle("/api/v1/welder-sbtx-second/video-comb/list", {
          d: {
            filters: [
              {
                field: "spaceId",
                operator: "EQUALS",
                value: this.newSpaceId || this.spaceId,
              },
            ],
            sorts: [{ field: "sequence", isDesc: false }],
          },
        }).then((res) => {
          this.playerList = res.result;
        });
      },
      handleClickSlide(e) {
        this.active = e;
        this.$nextTick(() => {
          const swiperTop = this.$refs.swiperTop.$swiper;
          swiperTop.slideTo(e, 1000, false);
        });
      },
    },
  };
  </script>
  
  <style>
  .tab-right .dplayer-controller {
    display: none;
  }
  </style>